<template>
    <view class="box">
        <view class="boson">
            <view @click="readconsultation(item.id)" class="itemlist" v-for="item in articleList" :key="item.id">
                <view>
                    <p class="p">{{item.title}}</p>
                    <text class="text">{{item.ctime | date}}</text>
                </view>
                <view>
                    <image class="img" :src="item.cover || '../../static/img/myhome/up-img@3x.png'" mode=""></image>
                </view>
            </view>
        </view>
        <view class="footer"></view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                articleList: []
            };
        },
        onLoad() {
            uni.showLoading({
                title: '加载中...'
            })
            this._getArticleList();
        },
        methods: {
            // 点击资讯内容，进行跳转阅读
            readconsultation(id) {
                uni.navigateTo({
                    url: '../Headlines/Information?id='+id
                })
            },
            // 文章资讯api
            _getArticleList() {
                this.$u.api.getArticleList().then(res => {
                    this.articleList = res.list
                    uni.hideLoading()
                }).catch(e => {
                    uni.hideLoading()
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    .box {
        // background-color: #EEEEEE;
        padding: 30rpx;
    }

    .boson {
        // min-height: 100vh;

        .itemlist {
            border-radius: 10rpx;
            margin-top: 30rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-left: 10rpx;
            padding: 15rpx 30rpx;
            background-color: #FFFFFF;
        }

        .img {
            width: 170rpx;
            height: 114rpx;
            border-radius: 10rpx;
        }

        .p {
            font-size: 28rpx;
            color: #666666;
            // line-height: 61rpx;
            margin-bottom: 20rpx;
        }

        .text {
            font-size: 24rpx;
            color: #999999;
        }
    }

    .footer {
        height: var(--status-bar-height);
    }
</style>
